function getProductId() {
    //http://127.0.0.1:5500/code/week7/day5/detail.html?id=50
    let url = location.href
    let params = url.substring(url.indexOf('?') + 1) //id=50
    let paramsArr = params.split('=') //['id','50']
    return paramsArr[1]
}

/**
 * 获取商品详情数据
 */
async function getProductDetail() {
    let id = getProductId()
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id
        }
    })
    let {
        resultCode,
        resultInfo
    } = data
    if (resultCode == 1) {
        showProductDetail(resultInfo)
    }
}
getProductDetail()

function showProductDetail(productDetail) {
    let detailStr = `
                      <div class="left">
                        <img src="${productDetail.picture}" alt="">
                        <div class="mask"></div>
                        <ul>
                        <li class="active">
                        <img src="${productDetail.picture}" alt="">
                        </li>
                        <li>
                        <img src="${productDetail.picture}" alt="">
                        </li>
                        <li>
                        <img src="${productDetail.picture}" alt="">
                        </li>
                        <li>
                        <img src="${productDetail.picture}" alt="">
                        </li>
                        </ul>
                         </div>
                    <div class="right">
                 <div class="picture">    <img src="${productDetail.picture}" alt=""></div>
                        <h2>${productDetail.shop}</h2>
                        <p>${productDetail.product}</p>
                        <p>￥${productDetail.price}</p>
                       <button class="add-cart"><a href="#" data-index=${productDetail.id})">加购物车</a></button>
                    </div>`
    $('.container').html(detailStr)

    // 加入购物车
    async function   onAddCart(){
        $('.add-cart').on('click', async function (e) {
            e.preventDefault()
            let id = getProductId()
            let data = await myPromise({
                method: 'get',
                url: 'http://api.yuguoxy.com/api/shop/find',
                data: {
                    id
                }
            })
            let {
                resultCode,
                resultInfo
            } = data
            if (resultCode == 1) {
                let cartListStr = localStorage.getItem('CART-LIST-4.0')
                let cartList = JSON.parse(cartListStr) || []
                console.log(cartList);
                console.log(resultInfo.id);
                let same = 0
                cartList.forEach(item => {
                    if (item.id == resultInfo.id) {
                        item.putaway++
                        same = 1
                    }
                })
                if (same == 1) {
                    localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))
                } else {
                    cartList.push(resultInfo)
                    localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))
    
                }
                location.href='./cartList.html'
            }
        })
    }
    onAddCart()
    // 显示与隐藏
    class Glass {
        constructor(id) {
            this.rootEle = document.querySelector(id)
            //遮罩层
            this.mask = this.rootEle.querySelector('.mask')
            //显示盒子showbox
            this.showBox = this.rootEle.querySelector('.left')
            // console.log(this.showBox);
            //放大镜盒子glassBox
            this.glassBox = this.rootEle.querySelector('.right')
            //背景图片bigPic
            this.bigPic = this.rootEle.querySelector('.right>.picture')
            //所有选项目
            this.lis = this.rootEle.querySelectorAll('li')
        }
        /**
         * 调整比例
         *   遮罩层          glassBoxZXCVBNM,./
         *   -----   =  ------------
         *   showBox        bigPic
         *    
         *   bigPicWidth = glassBoxW*showBoxW/遮罩层
         */
        setScale() {
            let bigPicWidth = parseInt(this.showBox.clientWidth * this.glassBox.clientWidth / this.mask.clientWidth)
            let bigPicHeight = parseInt(this.showBox.clientHeight * this.glassBox.clientHeight / this.mask.clientHeight)

            this.bigPic.style.width = bigPicWidth + 'px'
            this.bigPic.style.height = bigPicHeight + 'px'
        }

        /**
         * 放大镜核心功能
         *   遮罩层随光标在showBox盒子中移动，放大镜中背景随之移动
         * 
         *     1. showBox盒子中移动事件*/
        onGlass() {
            let _this = this
            this.showBox.addEventListener('mousemove', function (e) {
                e = e || window.event
                let x = e.offsetX - _this.mask.clientWidth / 2
                let y = e.offsetY - _this.mask.clientHeight / 2

                //边界查检
                if (x < 0) {
                    x = 0
                }
                if (x > _this.showBox.clientWidth - _this.mask.clientWidth) {
                    x = _this.showBox.clientWidth - _this.mask.clientWidth
                }
                if (y < 0) {
                    y = 0
                }
                if (y > _this.showBox.clientHeight - _this.mask.clientHeight) {
                    y = _this.showBox.clientHeight - _this.mask.clientHeight
                }

                _this.mask.style.left = x + 'px'
                _this.mask.style.top = y + 'px'

                //移动大背景图片
                /**
                    x         maskW
                  ----   =  -------- 
                  moveX       glassBoxW
                  moveX = x * glassBoxW / maskW
   
                */
                let moveX = x * _this.glassBox.clientWidth / _this.mask.clientWidth
                let moveY = y * _this.glassBox.clientHeight / _this.mask.clientHeight


                _this.bigPic.style.left = -moveX + 'px'
                _this.bigPic.style.top = -moveY + 'px'
            })

            this.showBox.addEventListener('mouseover', function (e) {

                _this.mask.style.display = 'block'
                _this.bigPic.style.display = 'block'
                _this.setScale()
                //遮罩层显示时计算宽高
            })
            this.showBox.addEventListener('mouseout', function (e) {
                _this.mask.style.display = 'none'
                _this.bigPic.style.display = 'none'
            })
        }

        /**
         * 切换
         *   1.设置选中效果 active
         *   2. 遍历所有选项，绑定事件
         *       2.1 清除所有选项样式
         *       2.2 当前选项设置样式
         */
        onTab() {
            let showBoxImg = this.showBox.querySelector('img')
            let _this = this
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].onmouseover = function () {
                    _this.onClear()

                    this.classList.add('active')
                    //更改显示showbox和背景图片bigpic
                    showBoxImg.setAttribute('src', `${productDetail.picture}`)
                    _this.bigPic.setAttribute('src', `./image/big_${i+1}.jpg`)
                }
            }
        }
        onClear() {
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].classList.remove('active')
            }
        }
    }
    let glass1 = new Glass('#glass1')
    glass1.onGlass()
    glass1.onTab()
}